<template>
  <div class="login-body">
    <h1 class="login-title">墨玉垂珠</h1>
    <div class="login-content">
      <a-card class="login-card">
        <div class="card-cover">
          <h1 style="font-weight: bold">用户登录</h1>
        </div>
        <a-form :model="form" :rules="rules" ref="formRef" class="login-form">
          <a-form-item name="account">
            <a-input
              v-model:value="form.account"
              size="large"
              allow-clear
              placeholder="请输入用户登录账号"
            >
              <template #prefix>
                <UserOutlined key="user" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item name="password">
            <a-input-password
              v-model:value="form.password"
              size="large"
              allow-clear
              placeholder="请输入用户登录密码"
            >
              <template #prefix>
                <LockOutlined key="lock" />
              </template>
            </a-input-password>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" class="login-button" :loading="loading" @click="loginClick"
              >登录</a-button
            >
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { reactive, ref, unref } from "vue";
import { type FormInstance, message } from "ant-design-vue";
import { setToken } from "@/utils/token-utils.ts";
import { useRouter } from "vue-router";
import { goHomeRoute } from "@/utils/page-tabs-utils.ts";

// 验证规则
const rules = reactive({
  account: [{ required: true, message: "请输入用户登录账号", type: "string", trigger: "blur" }],
  password: [{ required: true, message: "请输入用户登录密码", type: "string", trigger: "blur" }],
});
// 表单引用
const formRef = ref<FormInstance>();
// 表单数据
const form = reactive({
  account: "",
  password: "",
});
// 加载状态
const loading = ref(false);
// 当前路由对象
const { currentRoute } = useRouter();

/**
 * 登录
 * @author linyn
 * @date 2025/10/24 17:11
 * */
const loginClick = async () => {
  loading.value = true;
  try {
    await formRef.value?.validate();
    message.success("登录成功");
    setToken(form.account);
    goHome();
  } catch (error) {
    message.error("登录失败：" + error);
  } finally {
    loading.value = false;
  }
};

/**
 * 跳转到首页
 * @author linyn
 * @date 2025/10/24 17:11
 * */
/* 跳转到首页 */
const goHome = () => {
  const { query } = unref(currentRoute);
  goHomeRoute(query.from);
};
</script>
<style scoped lang="scss">
.login-body {
  min-height: 100vh; /* 100% 视口高度 */
  background-size: cover; /* 确保背景图缩放正常 */
  background-image: url("@/assets/image/loginBackground.jpg"); /* 背景图片路径 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  padding: 35px 35px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.login-title {
  font-size: 50px;
  color: white;
}
.login-content {
  flex: 1;
  display: flex;
  align-items: flex-start; /* 水平居中 */
  justify-content: flex-end; /* 垂直居中 */
  padding-top: 15vh;
  padding-right: 80px;
}
.login-icon {
  margin-bottom: 40px;
}
.login-card {
  width: 380px;
}
.card-cover {
  padding: 10px 0 20px 0;
  text-align: center;
  font-size: 16px;
}
.login-button {
  width: 100%;
  height: 40px;
  font-size: 18px;
  margin-top: 10px;
}
</style>
